<template lang="html">
  <div class="UploadFile">
    <Modal v-model="showModel" :closable="false" :mask-closable="false" :footer-hide="true" :title="status">
      <p>正在上传中</p>
    </Modal>
    <div class="ivu-upload ivu-upload-select">
      <input v-show="false" ref="input" type="file" @change="handleChange">
      <button @click="handleClick" type="button" class="ivu-btn ivu-btn-default">
        <span>{{status}}</span>
      </button>
    </div>
    {{UploadFileName}}
    {{UploadFileId}}
  </div>
</template>

<script>
  export default {
    name: 'UploadFile',
    props: {
      UploadFileName: null,
      UploadFileId: null,
    },
    data() {
      return {
        status: '上传',
        showModel: false,
        // 支持的文件后缀名
        canExt: [
          '.png',
          '.jpg',
          '.docx',
        ],
      }
    },
    mounted() {
    },
    methods: {
      handleClick() {
        this.$refs.input.click()
      },
      handleChange(e) {
        let file = e.target.files[0]
        if (!file) {
          return
        }
        // 获取文件扩展名
        let name = file.name,
          canExt = this.canExt,
          ext = name.substring(name.lastIndexOf('.'))

        if (canExt.indexOf(ext) == -1) {
          this.$Message.error('不支持此格式')
          this.$refs.input.value = null
          return
        }

        this.post(file)
      },
      post(file) {
        this.$Loading.start();
        this.showModel = true
        this.status = '上传中'
        let formdata = new FormData()
        formdata.append('file', file)
        // let formdata = {
        //   file: fileData,
        //   id: this.UploadFileId,
        //   key: this.UploadFileName,
        // }
        // formdata.append('file', file)
        formdata.append('id', this.UploadFileId)
        formdata.append('key', this.UploadFileName)

        console.log(formdata)
        // return

        axios.post('/fileUpload/uploadAvatar', formdata).then((res) => {
          this.$Message.success('上传完成')
          this.$Loading.finish();
          this.showModel = false
          this.status = file.name
          this.$emit('input', '1111')
          // this.$emit('input', res.path)
          console.log(res);
        })
      },
    },
  }
</script>

<style lang="css">
</style>